﻿@model ProductModel

@if (Model.Id > 0)
{
    <div>
        <div id="productpictures-grid"></div>

        <script>
            $(document).ready(function () {
                $("#productpictures-grid").kendoGrid({
                    dataSource: {
                        type: "json",
                        transport: {
                            read: {
                                url: "@Html.Raw(Url.Action("ProductPictureList", "Product", new { productId = Model.Id }))",
                                type: "POST",
                                dataType: "json"
                            },
                            update: {
                                url:"@Html.Raw(Url.Action("ProductPictureUpdate", "Product"))",
                                type: "POST",
                                dataType: "json"
                            },
                            destroy: {
                                url: "@Html.Raw(Url.Action("ProductPictureDelete", "Product"))",
                                type: "POST",
                                dataType: "json"
                            }
                        },
                        schema: {
                            data: "Data",
                            total: "Total",
                            errors: "Errors",
                            model: {
                                id: "Id",
                                fields: {
                                    PictureUrl: {editable: false, type: "string" },
                                    DisplayOrder: {editable: true, type: "number" }
                                }
                            }
                        },
                        requestEnd: function(e) {
                            if(e.type=="update") {
                                this.read();
                            }
                        },
                        error: function(e) {
                            display_kendoui_grid_error(e);
                            // Cancel the changes
                            this.cancelChanges();
                        },
                        serverPaging: true,
                        serverFiltering: true,
                        serverSorting: true
                    },
                    pageable: {
                        refresh: true,
                        numeric: false,
                        previousNext: false,
                        info: false
                    },
                    editable: {
                        confirmation: false,
                        mode: "inline"
                    },
                    scrollable: false,
                    columns: [{
                        field: "PictureUrl",
                        title: "@T("Admin.Catalog.Products.Pictures.Fields.Picture")",
                        template: '<a href="#=PictureUrl#" target="_blank"><img alt="#=PictureId#" src="#=PictureUrl#" width="150" /><a/>',
                        width: 200
                    }, {
                        field: "DisplayOrder",
                        title: "@T("Admin.Catalog.Products.Pictures.Fields.DisplayOrder")",
                        //integer format
                        format: "{0:0}",
                        width: 150
                    }, {
                        command: [{
                            name: "edit",
                            text: "@T("Admin.Common.Edit")"
                        }, {
                            name: "destroy",
                            text: "@T("Admin.Common.Delete")"
                        }],
                        width: 200
                    }]
                });
            });
        </script>
    </div>
    <p>
        <strong>@T("Admin.Catalog.Products.Pictures.AddNew")</strong>
    </p>
    <script type="text/javascript">
     
        $(document).ready(function () {
            $('#addProductPicture').click(function () {
                var pictureId = $("#@Html.FieldIdFor(model => model.AddPictureModel.PictureId)").val();
                var displayOrder = $("#@Html.FieldIdFor(model => model.AddPictureModel.DisplayOrder)").val();
                
                if (pictureId == 0) {
                    alert('Upload picture first');
                    return;
                }

                $('#addProductPicture').attr('disabled', true);
                $.ajax({
                    cache:false,
                    type: "POST",
                    url: "@(Url.Action("ProductPictureAdd", "Product"))",
                    data: { "pictureId": pictureId, "displayOrder": displayOrder, "productId": @Model.Id },
                    success: function (data) {
                        var productpicturesGrid = $("#productpictures-grid");
                        productpicturesGrid.data('kendoGrid').dataSource.read();
                        $('#addProductPicture').attr('disabled', false);
                    },
                    error:function (xhr, ajaxOptions, thrownError){
                        alert('Failed to add product picture.');
                        $('#addProductPicture').attr('disabled', false);
                    }  
                });
            });
        });
    </script>        
    <table class="adminContent">
        <tr>
            <td class="adminTitle">
                @Html.NopLabelFor(model => model.AddPictureModel.PictureId):
            </td>
            <td class="adminData">
                @Html.EditorFor(model => model.AddPictureModel.PictureId)
                @Html.ValidationMessageFor(model => model.AddPictureModel.PictureId)
            </td>
        </tr>
        <tr>
            <td class="adminTitle">
                @Html.NopLabelFor(model => model.AddPictureModel.DisplayOrder):
            </td>
            <td class="adminData">
                @Html.EditorFor(model => model.AddPictureModel.DisplayOrder)
                @Html.ValidationMessageFor(model => model.AddPictureModel.DisplayOrder)
            </td>
        </tr>
        <tr>
            <td colspan="2" align="left">
                <input type="button" id="addProductPicture" class="k-button" value="@T("Admin.Catalog.Products.Pictures.AddButton")" />
            </td>
        </tr>
    </table>
}
else
{
    @T("Admin.Catalog.Products.Pictures.SaveBeforeEdit")
}